iT邦幫忙

DAY 2
2

我在前端 ng 時系列 第 2

jQuery 跟 AngularJS 的糾葛

  • 分享至 

  • xImage
  •  

AngularJS 有些人覺得難學理由之一,是因為它跟大多數網站所使用的 jQuery 設計思維差很多。

而且 AngularJS 又有內建 jqLite (jQuery 的精簡版),

造成一開始用 AngularJS 設計網站的時候會被 jQuery 的想法牽著走,然後又覺得被 AngularJS 的框架束縛住。

就會覺得 AngularJS 很複雜。


我對 jQuery 跟 AngularJS 整理出的一些想法

1. jQuery vs AngularJS

jQuery 是操作畫面 DOM 的工具函式庫;AngularJS 是軟體框架。

jQuery 的思維來說,開發一個網站的步驟是

  1. 拿到設計稿
  2. 切割畫面成一個一個 components
  3. jQuery time! 找尋 DOM element, 使用 jQuery 繫結 element 的事件。 (操作 DOM)
  4. 把全部的 components 的動作寫完 -> 完成網站!!
    example

AngularJS 思維是

  1. 拿到設計稿
  2. Angular time! 開始構想架構。(從 application 的思維開始想, 思考此 app 需要什麼事件、 DOM 或 functions)
  3. 撰寫 JavaScript ,把需要的資源 (model or functions) 準備好。
  4. 撰寫 HTML template,把對應的資源綁在 DOM 上面. (ng-model, ng-click, etc)
  5. 讓畫面上的邏輯都找到對應的資料 -> 完成網站!!
    example

jQuery:
pros: HTML 精簡,不會把邏輯放在 HTML 上
cons: 當網站架構變大時,JavaScript files 最後會很肥,很難維護。

AngularJS:
pros: 依照資源做事,只要分享的資料相同。 HTML 可以簡單的的複製、修改邏輯或維護。
cons: HTML 雜亂,會有大量的邏輯放在 HTML 上。

總之 AngularJS 是從架構這個思維出發。
所以 一開始起步做網頁的時候建立上會比較慢。(因須設計架構)。
可是當未來需要修改 spec 跟維護網站時,會覺得當初的思考架構是值得的。

jQuery 則相反, 非常方便操作 DOM 達到立即需要的效果,可是當要修改 spec 或未來維護的時候就會默默的嘆氣。

綜合以上, 我的建議是
做小型網站時,可以使用 jQuery。(資訊簡單,不會有大量的使用者互動)
製作中大型網站可以使用 AngularJS。(或其他 framework)

2. 從 jQuery 到 AngularJS

StackOverFlow 有一篇關於 "如何從 jQuery 思維轉變到 AngularJS 思維” 的文章。
寫的不錯,本來想要幫整理一下精簡本。可是再寫文章的過程中發現已經有中文版了!
這裡就不多說了,大家點選下面看看吧~~

原文: how do I think in angularjs if have a jquery background
中文翻譯: StackOverFlow精彩问答赏析:有jQuery背景的开发者如何建立起AngularJS的思维模式?

3. 須不須要在額外 include jQuery library?

AngularJS 官網說, 當你先 include jQuery library 後, angular.element 裡的 methods 會自動增加 jQuery element 的 method)。
假如沒有載入,就維持原本的 AngularJS jqLite 提供的 methods. (angular.element 列表)

一年前的我:
為了方便性,還是 include jQuery libary 好了。
這樣甚麼都可以用,反正現在 minify 後的檔案又不大。 (oh yeah)

一年後的我:
其實...好像真的用不到 jQuery 的 methods。
需求 AngularJS jqLite 其實都可以做到,只是需要換個角度好好想想。
網路上已經有很多用 AngularJS jqLite 完成的 jQuery methods 應用。
打個比方, 如何用 AngularJS 實做 jQuery.sibilings()

所以當發現 "天阿!! 我需要某個 jQuery methods” 時,先冷靜想想或查查資料。
大部分其實都可以使用 AngularJS jqLite 完成需求的。


上一篇
初學 AngularJS 的路
下一篇
AngularJS - MVC 架構
系列文
我在前端 ng 時30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言